import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getWallListAPI } from '@/api/wall.js'
import { message } from '@/components/ZyMessage/index.js'

// 基础信息
export const useCommonStore = defineStore(
  'common',
  () => {
    // 墙的列表
    const walls = ref([])
    // 当前的墙
    const currentWall = ref({})
    // 获取墙的列表
    const getWallList = async () => {
      walls.value = await getWallListAPI()
      currentWall.value = walls.value[0]
    }
    // 切换墙
    const changeWall = async (id) => {
      if (currentWall.value.id === id) return
      currentWall.value = walls.value.find((item) => item.id === id)
    }

    // 是否显示头部
    const isShowHead = ref(true)
    const toggleShowHead = (isShow) => {
      isShowHead.value = isShow
    }

    // 触底加载或者点击加载
    const isAutoLoad = ref(false)
    const toggleAutoLoad = () => {
      isAutoLoad.value = !isAutoLoad.value
      if (isAutoLoad.value) {
        message('触底加载已开启')
      }
      window.scrollTo(0, 0)
    }

    return {
      walls,
      currentWall,
      getWallList,
      changeWall,
      isShowHead,
      toggleShowHead,
      isAutoLoad,
      toggleAutoLoad
    }
  },
  {
    persist: {
      storage: sessionStorage
    }
  }
)
